<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item> <i class="el-icon-shopping-bag-2"></i> 合同模板 </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="handle-box">
        <el-button type="primary" class="handle-del mr10" @click="addClick">新增</el-button>
        <el-input placeholder="请输入协议名称查询" class="handle-input mr10" v-model="query.souVal"></el-input>
        <el-button type="primary" icon="el-icon-search" @click="getList">搜索</el-button>
      </div>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column type="selection" width="55" align="center"></el-table-column>
        <el-table-column type="index" :index="tableIndex" label="序号" width="55" align="center"></el-table-column>
        <el-table-column prop="contractName" label="合同名称"></el-table-column>
        <el-table-column prop="applicationScenarios" label="应用场景"></el-table-column>
        <el-table-column prop="date" label="操作" width="180">
          <template slot-scope="scope">
            <el-button type="text" icon="el-icon-edit" class="red" @click="editBtnClick(scope.row.mobId,scope.row)">编辑</el-button>
            <el-button type="text" icon="el-icon-delete" class="red" @click="delClick(scope.row.mobId)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination background layout="total, prev, pager, next" :current-page="query.page" :page-size="query.limit" :total="page.totalCount"
                       :pager-count="5" @current-change="PageChange" @prev-click="PageChange" @next-click="PageChange"></el-pagination>
      </div>
    </div>
    <el-drawer :visible.sync="drawerFlg" :with-header="false" direction="rtl" size="85%">
      <div class="drawerCan" :v-loading="form.load">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="协议名称">
            <el-input v-model="form.name" placeholder="请输入协议名称 例如：用户协议"></el-input>
          </el-form-item>
          <el-form-item label="应用场景">
            <el-select v-model="form.region" placeholder="请选择应用场景" style="width:100%;">
              <el-option label="热门列表" value="1"></el-option>
              <el-option label="推荐列表" value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <Editor v-model="article.content" :key='editId' />
      </div>
      <div style="margin:40px 0 20px;text-align:center;">
        <el-button type="primary" @click="formSub" :loading="form.load">保存</el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import Editor from '../../common/quillEditor';
import { contractTemplateList, contractTemplateAdd, contractTemplateEdit, contractTemplateDel } from '../../../api/index';


export default {
  data() {
    return {
      listLoad: false,
      drawerFlg: false,
      tableData: [],
      query: {
        page: 1,
        limit: 10,
        souVal: ''
      },
      page: {
        totalCount: 100
      },
      editId: '',
      form: {
        load: false,
        name: '',
        region: '',
      },
      article: {
        content: ''
      }
    };
  },
  created() {
    this.getList();
  },
  watch: {
    drawerFlg(n, a) {
      console.log(this.article.content);
    }
  },
  components: {
    Editor
  },
  methods: {
    //列表
    getList() {
      this.listLoad = true;
      let query = {
        contractQuery: {
          contractName: this.query.souVal
        },
        current: this.query.page,
        limit: this.query.limit
      }
      contractTemplateList(query).then((res) => {
        this.listLoad = false;
        if (res.code == 0) {
          this.page.totalCount = res.totalCount;
          this.tableData = res.projectList;
        } else {
          this.$message(res.msg);
        }
      })

    },
    //序号
    tableIndex(index) {
      return (this.query.page - 1) * this.query.limit + index + 1;
    },
    //翻页
    PageChange(num) { },
    //新增
    addClick() {
      this.form.name = '';
      this.form.region = '';
      this.article.content = '';
      this.editId = '';
      this.drawerFlg = true;
    },
    //提交
    formSub() {
      this.form.load = true;
      let formdata = {
        mobId: this.editId,
        contractName: this.form.name,
        applicationScenarios: this.form.region,
        contentAgreement: this.article.content
      }
      if (this.editId) {
        contractTemplateEdit(formdata).then((res) => {
          this.form.load = false;
          this.drawerFlg = false;
          if (res.code == 0) {
            this.$message.success('编辑成功');
            this.getList();
          } else {
            this.$message(res.msg);
          }
        })
      } else {
        contractTemplateAdd(formdata).then((res) => {
          this.form.load = false;
          this.drawerFlg = false;
          if (res.code == 0) {
            this.$message.success('保存成功');
            this.getList();
          } else {
            this.$message(res.msg);
          }
        })
      }
    },
    //编辑
    editBtnClick(id, item) {
      this.editId = id;
      this.drawerFlg = true;
      this.form.name = item.contractName;
      this.form.region = String(item.applicationScenarios);
      this.article.content = item.contentAgreement;
    },
    //删除
    delClick(id) {
      contractTemplateDel({ mobId: id }).then((res) => {
        if (res.code == 0) {
          this.$message.success('删除成功');
          this.getList();
        } else {
          this.$message(res.msg);
        }
      })
    }
  }
};
</script>

<style scoped>
/deep/ :focus {
    outline: 0;
}
.handle-input {
    width: 300px;
    display: inline-block;
}
.drawerCan {
    padding: 20px;
}
</style>
